<template>
    <div class="mui-numbox" data-numbox-min='1'  >
        <!--购物车中选择减-->
        <button class="mui-btn mui-btn-numbox-minus" type="button" >-</button>
        <input id="test" class="mui-input-numbox" type="number" ref="carnum" :value="currentnum" @change="changeNum"  />
        <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
    </div>
</template>

<script>
    import mui from "../../lib/mui/js/mui.min.js"

    export default {
        created(){
            // console.log(this.max);
        },

        methods:{
            changeNum(){
                // debugger;
                var nowVal = this.$refs.carnum.value;
                //调用mutations去更新storage里面的数值
                var obj = {
                    id:this.currentid,
                    num: this.$refs.carnum.value
                }

                this.$store.commit("updateGoodsTotal",obj)
                console.log(this.currentid);
                console.log(this.$refs.carnum.value);
            }
        },

        //dom元素挂载好后
        mounted() {
            //初始化mui的数字输入框
            mui(".mui-numbox").numbox()
        },
        //最大值：如果不做处理，直接使用的话，会是undifined
        //currentnum表示，当前storage中该商品的数量，通过getters得到的
        //currentid表示，当前商品的id
        props:["currentnum","currentid"],

        //监听属性的变化
        watch:{
            /*"currentnum": function(newNum,oldNum){



            }*/
        }
    }
</script>

<style scoped>
    .mui-numbox{
        height:50%;
        font-size: 12px;
    }
</style>